<template>
	<view class="container">
		<nav-bar :title="title"></nav-bar>
		<view class="search-box">
			<view class="search-before-box" v-show="!isInput" @tap="showInput">
				<view class="search-content-box">
					<view class="search-icon">
						<image src="../../static/images/search.png"></image>
					</view>
					<view class="search-label">搜索</view>
				</view>
			</view>
			<view class="search-after-box" v-show="isInput">
				<input @input="search" v-model="keyword" :focus="isFocus" @blur="hideInput" />
			</view>
		</view>
		<view class="member-list">
			<view class="member-item" v-for="(item,index) in dataList" :key="index">
				<view class="member-avatar">
					<image :src="item.avatar"></image>
				</view>
				<view class="member-name">{{item.name}}</view>
			</view>
			<view class="member-item" @tap="goDelGroupMember">
				<view class="member-avatar">
					<image src="../../static/images/del_member.png"></image>
				</view>
				<view class="member-name"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import NavBar from '../../components/nav_bar.vue'
	
	export default {
		components: {
			NavBar
		},
		
		data() {
			return {
				title: '群成员',
				isInput: false,
				isFocus: false,
				keyword: '',
				dataList: [],
				dataAllList: [
					{id: 1, name: '黎昕', avatar: 'https://gss0.baidu.com/70cFfyinKgQFm2e88IuM_a/forum/w=580/sign=2ac4499efdfaaf5184e381b7bc5594ed/e3fb8c64034f78f013e97b4b79310a55b2191cba.jpg'},
					{id: 2, name: '往事难...', avatar: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201810%2F24%2F20181024133921_wlvbo.thumb.700_0.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1613212016&t=a7697b8a674aafb037fa4ebd35ddb2eb'},
					{id: 3, name: '黎昕', avatar: 'https://gss0.baidu.com/70cFfyinKgQFm2e88IuM_a/forum/w=580/sign=2ac4499efdfaaf5184e381b7bc5594ed/e3fb8c64034f78f013e97b4b79310a55b2191cba.jpg'},
					{id: 4, name: '往事难...', avatar: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201810%2F24%2F20181024133921_wlvbo.thumb.700_0.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1613212016&t=a7697b8a674aafb037fa4ebd35ddb2eb'},
					{id: 5, name: '黎昕', avatar: 'https://gss0.baidu.com/70cFfyinKgQFm2e88IuM_a/forum/w=580/sign=2ac4499efdfaaf5184e381b7bc5594ed/e3fb8c64034f78f013e97b4b79310a55b2191cba.jpg'},
					{id: 6, name: '往事难...', avatar: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201810%2F24%2F20181024133921_wlvbo.thumb.700_0.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1613212016&t=a7697b8a674aafb037fa4ebd35ddb2eb'},
					{id: 7, name: '黎昕', avatar: 'https://gss0.baidu.com/70cFfyinKgQFm2e88IuM_a/forum/w=580/sign=2ac4499efdfaaf5184e381b7bc5594ed/e3fb8c64034f78f013e97b4b79310a55b2191cba.jpg'},
					{id: 8, name: '我cao...', avatar: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201810%2F24%2F20181024133921_wlvbo.thumb.700_0.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1613212016&t=a7697b8a674aafb037fa4ebd35ddb2eb'},
					{id: 9, name: '不懂', avatar: 'https://gss0.baidu.com/70cFfyinKgQFm2e88IuM_a/forum/w=580/sign=2ac4499efdfaaf5184e381b7bc5594ed/e3fb8c64034f78f013e97b4b79310a55b2191cba.jpg'},
					{id: 10, name: '往事难...', avatar: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201810%2F24%2F20181024133921_wlvbo.thumb.700_0.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1613212016&t=a7697b8a674aafb037fa4ebd35ddb2eb'},
					{id: 11, name: '黎昕', avatar: 'https://gss0.baidu.com/70cFfyinKgQFm2e88IuM_a/forum/w=580/sign=2ac4499efdfaaf5184e381b7bc5594ed/e3fb8c64034f78f013e97b4b79310a55b2191cba.jpg'},
					{id: 12, name: '往事难...', avatar: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201810%2F24%2F20181024133921_wlvbo.thumb.700_0.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1613212016&t=a7697b8a674aafb037fa4ebd35ddb2eb'},
				]
			}
		},
		
		onLoad() {
			this.title = '群成员(' + this.dataAllList.length + ')'
			this.dataList = this.dataAllList
		},
		
		methods: {
			
			goDelGroupMember() {
				uni.navigateTo({
					url: '/pages/del_group_member/del_group_member'
				})
			},
			
			showInput() {
				this.isInput = true
				this.isFocus = true
			},
			
			hideInput() {
				this.isInput = false
				this.isFocus = false
			},
			
			search() {
				const that = this
				that.dataList = that.dataAllList.filter(item => {
					return item.name.includes(that.keyword)
				})
			}
			
		}
	}
</script>

<style>
	.container {
		width: 750rpx;
	}
	
	.search-box {
		width: 750rpx;
		height: 90rpx;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
	}
	
	.search-before-box {
		width: 700rpx;
		height: 64rpx;
		background-color: #f4f4f4;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		border-radius: 32rpx;
	}
	
	.search-content-box {
		width: 104rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	
	.search-icon {
		margin-top: 4rpx;
	}
	
	.search-icon image {
		width: 32rpx;
		height: 32rpx;
	}
	
	.search-label {
		color: #bcbcbc;
		font-size: 24rpx;
	}
	
	.search-after-box {
		width: 700rpx;
		height: 64rpx;
		background-color: #f4f4f4;
		display: flex;
		flex-direction: column;
		justify-content: center;
		border-radius: 32rpx;
	}
	
	.search-after-box input {
		color: #333333;
		font-size: 30rpx;
		margin-left: 30rpx;
	}
	
	.member-list {
		width: 750rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
	
	.member-item {
		margin-bottom: 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-left: 42rpx;
	}
	
	.member-avatar image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 10rpx;
	}
	
	.member-name {
		color: #999999;
		font-size: 24rpx;
	}
</style>
